<template>
	<view class="comp-a">
		<view class="component-title">子组件A</view>
		<view class="value-display">
			<text>父组件传进来的值: {{ intent }}</text>
		</view>
		<button 
			@click="passValueToB" 
			class="pass-button"
			:disabled="!intent"
		>
			传值给CompB组件
		</button>
	</view>
</template>

<script>
	export default {
		props: {
			intent: {
				type: String,
				default: ''
			}
		},
		methods: {
			passValueToB() {
				if (this.intent) {
					// 触发事件，将值传递给父组件，再由父组件传递给B
					this.$emit('pass-to-b', this.intent);
					uni.showToast({
						title: '已传值给B组件',
						icon: 'success',
						duration: 1500
					});
				} else {
					uni.showToast({
						title: '请先在父组件输入值',
						icon: 'none',
						duration: 2000
					});
				}
			}
		}
	}
</script>

<style scoped>
	.comp-a {
		background-color: white;
		padding: 30rpx;
		margin: 20rpx 0;
		border-radius: 10rpx;
		border-left: 8rpx solid #409eff;
	}
	
	.component-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #409eff;
		margin-bottom: 20rpx;
	}
	
	.value-display {
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		margin-bottom: 30rpx;
	}
	
	.value-display text {
		font-size: 28rpx;
		color: #333;
	}
	
	.pass-button {
		background-color: #409eff;
		color: white;
		border: none;
		padding: 20rpx 40rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
	
	.pass-button[disabled] {
		background-color: #c0c4cc;
		color: #909399;
	}
</style>